<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/three.js" ></script>
    <script src="lib/js/libs/ammo.wasm.js"></script>
    <style type="text/css">
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }
 
    </style>
 
</head>
<body id="canvas-frame" >
<script type="module">
    import * as Game from "./js/game.js"
    
    var game;
    var renderer;
    var width=window.innerWidth;
    var height = window.innerHeight;
    let SCREEN_WIDTH = window.innerWidth;
    let SCREEN_HEIGHT = window.innerHeight;
    let aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
    let physicsWorld;
    var cameraPerspectiveHelper;
    var cameraPerspective;
    var camera;
    var scene;
    var light;
    
    Ammo().then( function ( AmmoLib ) {
        Ammo = AmmoLib;
        init();
    } );
    
    function initPhysics() {
        // Physics configuration
        const gravityConstant = -9.8;
        collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();
        dispatcher = new Ammo.btCollisionDispatcher( collisionConfiguration );
        broadphase = new Ammo.btDbvtBroadphase();
        solver = new Ammo.btSequentialImpulseConstraintSolver();
        softBodySolver = new Ammo.btDefaultSoftBodySolver();
        physicsWorld = new Ammo.btSoftRigidDynamicsWorld( dispatcher, broadphase, solver, collisionConfiguration, softBodySolver );
        physicsWorld.setGravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );
        physicsWorld.getWorldInfo().set_m_gravity( new Ammo.btVector3( 0, gravityConstant, 0 ) );

        transformAux1 = new Ammo.btTransform();
    }
    
    function init() {
        game=new Game.Game();
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio( window.devicePixelRatio );
 
        document.body.appendChild(renderer.domElement);
        renderer.setClearColor(0x000000, 1.0);
        
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, width / height, 1, 10000);
        game.init(scene,camera,renderer,physicsWorld);
        
        light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
        light.position.set(100, 100, 200);
        
        init();
        render();
        window.addEventListener( 'resize', onWindowResize, false );
    }
    
    function render()
    {
        requestAnimationFrame(render);
        renderer.clear();
        game.frame();
        renderer.render( scene,  camera);
    }
    
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }
    init();
 
</script>
</body>
</html>